<template>
  <div class="demo-title">dialog/demo1</div>
  <div class="demo">
    <div class="sscd-demo-row" @click="tip()">提示框</div>
    <div class="sscd-demo-row" @click="tipCustom()">提示框（自定义内容）</div>
    <div class="sscd-demo-row" @click="confirm()">确认框</div>
    <div class="sscd-demo-row" @click="confirmCustom()">确认框（自定义按钮文案）</div>
    <div class="sscd-demo-row" @click="confirmAsync()">确认框（异步关闭）</div>
  </div>
</template>

<script lang="ts" setup>
  import Dialog from '@sscd-mobile/dialog'

  // 提示框
  const tip = () => {
    Dialog.tip({
      title: '提示框',
      content: '我是正文单行内容居中对齐',
      onCancel: () => console.log('tip-cancel'),
      onOk: () => console.log('tip-ok')
    })
  }

  // 提示框（自定义内容）
  const tipCustom = () => {
    Dialog.tip({
      title: '提示框',
      content: '<div style="color: blue;">这里是自定义内容。。</div>',
      onCancel: () => console.log('tipCustom-cancel'),
      onOk: () => console.log('tipCustom-ok')
    })
  }

  // 确认框
  const confirm = () => {
    Dialog.confirm({
      title: '提示框',
      content: '我是正文多行内容居中对齐~我是正文多行内容居中对齐',
      onCancel: () => console.log('confirm-cancel'),
      onOk: () => console.log('confirm-ok')
    })
  }

  // 确认框（自定义按钮文案）
  const confirmCustom = () => {
    Dialog.confirm({
      title: '提示框',
      content: '我是正文多行内容居中对齐~我是正文多行内容居中对齐',
      cancelText: 'cancel',
      okText: 'ok',
      onCancel: () => console.log('confirmCustom-cancel'),
      onOk: () => console.log('confirmCustom-ok')
    })
  }
  
  // 确认框（异步关闭）
  const confirmAsync = () => {
    Dialog.confirm({
      title: '提示框',
      content: '我是正文多行内容居中对齐~我是正文多行内容居中对齐',
      onCancel: () => console.log('confirmAsync-cancel'),
      okText: '1s后关闭',
      onOk: () => console.log('confirmAsync-ok'),
      beforeClose: async (action: string) => {
        const res = await new Promise((resolve) => {
          setTimeout(() => resolve(action === 'ok'), 1000)
        })
        return res
      }
    })
  }
</script>

<style lang="less" scoped></style>
